<template>
    <div class="userinfo" >
         <!-- v-for="(item,index) in usermes" :key="index" v-loading="loading"-->
        <div class="userinfo_item">
            <img src="@/assets/njrpic/usercenterpic/account_id.png" alt="">
            <span>{{usermes.id}}</span>
        </div>
         <div class="userinfo_item">
            <img src="@/assets/njrpic/usercenterpic/account_phone.png" alt="">
            <span>{{usermes.mobile}}</span>
        </div>
        <router-link to="/usercenter/editusername" tag="div" class="userinfo_item">
            <img src="@/assets/njrpic/usercenterpic/account_nickname.png" alt="">
            <span>{{usermes.username}}</span>
            <i class="el-icon-arrow-right"></i>
        </router-link>
        <router-link to="/usercenter/editsex" tag="div" class="userinfo_item">
            <img src="@/assets/njrpic/usercenterpic/account_sex.png" alt="">
            <span v-if="usermes.sex==0">男</span>
            <span v-else>女</span>
            <i class="el-icon-arrow-right"></i>
        </router-link>
         <router-link to="/usercenter/editage" tag="div" class="userinfo_item">
            <img src="@/assets/njrpic/usercenterpic/account_birthday.png" alt="">
            <span>{{usermes.age}}</span>
            <i class="el-icon-arrow-right"></i>
         </router-link>
        <router-link to="/usercenter/editpassword" tag="div" class="userinfo_item">
            <img src="@/assets/njrpic/usercenterpic/account_pass.png" alt="">
            <span>修改密码</span>
            <i class="el-icon-arrow-right"></i>
        </router-link>
         <router-link to="/usercenter/editteeth" tag="div" class="userinfo_item">
            <img src="@/assets/njrpic/usercenterpic/account_tooth.png" alt="">
            <span>是否蛀牙</span>
            <i class="el-icon-arrow-right"></i>
         </router-link>
         <router-link to="/usercenter/editwhite" tag="div" class="userinfo_item">
            <img src="@/assets/njrpic/usercenterpic/account_tooth1.png" alt="">
            <span>美白度</span>
            <i class="el-icon-arrow-right"></i>
         </router-link>
        <div class="btn">
         <el-button @click="exitid">退出账号</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            usermes:{
                'id':'',
                'mobile':'',
                'username':'',
                'sex':'',
                'age':'',
                'teeth':'',
                'whiteteeth':''
            },
            username:this.$store.state.username
        }
    },
    mounted(){
        const loading = this.$loading({
          lock: true,
          text: '正在获取数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
        this.$http.get('/api/users/'+this.username).then(({
            data,config
        })=>{
            if(data.code==200){
                this.usermes=data.data
                console.log(this.usermes);
            }else{
                this.$message.error('查询数据失败')
            }
        })
        // console.log(this.username);
    },
    methods:{
        exitid(){
            this.$router.push('/login')
        }
    }
}
</script>
<style lang="less" scoped>
.userinfo{
    background-color: white;
}
.userinfo_item{
    display: flex;
    align-items: center;
    margin-left: 50px;
    padding: 5px;
    border-bottom: 5px solid #f4f4f4;
    img{
        width: 10%;
        margin-right: 25px;
    }
   span{
       flex: 4;
   }
   
}
.btn{
       text-align: center;
        margin-top:50px ;
       .el-button{
           width: 60%;
           border-radius: 35px;
           padding: 15px 0;
       }
   }
   ::-webkit-scrollbar{
       display: none;
   }
</style>